import 'package:country_code_picker/country_code_picker.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:vape_xe/routes/app_pages.dart';
import 'package:vape_xe/services/services.dart';
import 'package:vape_xe/utils/utils.dart';
import 'package:vape_xe/values/values.dart';
import 'package:vape_xe/widgets/widgets.dart';

import 'logic.dart';

class SignUpView extends GetView<SignUpController> {
  const SignUpView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: const Icon(Icons.arrow_back_ios_new_rounded),
          onPressed: () => {Navigator.of(context).pop('刷新')},
        ),
      ),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            30.hGap,
            Padding(
              padding: EdgeInsets.only(left: 32.w),
              child: Text(
                'Sign up to XE'.tr,
                style: TextStyle(fontSize: 28.sp, fontWeight: FontWeight.bold),
              ),
            ),
            24.hGap,
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 20.w),
              child: TabBar(
                tabs: controller.tabTitles.map((e) => Tab(text: e)).toList(),
                controller: controller.tabController,
                indicatorColor: AppColors.primaryText,
                indicatorPadding: EdgeInsets.symmetric(vertical: 8.h),

                /// 下面不要横线
                dividerHeight: 0,

                /// labelStyle里面设置color还无效
                unselectedLabelStyle: const TextStyle(fontWeight: FontWeight.bold),
                labelStyle: const TextStyle(fontWeight: FontWeight.bold),
                labelColor: AppColors.primaryText,
                unselectedLabelColor: AppColors.secondaryText,
              ),
            ),
            16.hGap,
            InnerContainerWidget(
              child: Obx(
                () => Row(
                  children: [
                    if (controller.isPhone)
                      Row(
                        children: [
                          CountryCodePicker(
                            enabled: true,
                            initialSelection: '+${ConfigStore.to.countryCode}',
                            showCountryOnly: false,
                            showOnlyCountryWhenClosed: false,
                            alignLeft: false,
                            dialogBackgroundColor: Colors.black,
                            closeIcon: const Icon(Icons.close, color: Colors.white),
                            hideSearch: true,
                            padding: EdgeInsets.zero,
                            showFlag: false,
                            showFlagDialog: true,
                            textStyle: TextStyle(fontSize: 14.sp, color: Colors.white, fontWeight: FontWeight.bold),
                            onChanged: (country) {
                              controller.dialCode = country.dialCode ?? '';
                            },
                          ),
                          Container(
                            width: 1.w,
                            height: 12.h,
                            color: Colors.white10,
                          ),
                        ],
                      ),
                    16.vGap,
                    Expanded(
                      child: TextField(
                        keyboardType: controller.isPhone ? TextInputType.number : TextInputType.emailAddress,
                        controller: controller.accountController,
                        decoration: InputDecoration(
                          border: InputBorder.none,
                          hintText: controller.isPhone ? 'Phone number'.tr : 'Email'.tr,
                          hintStyle: TextStyle(color: Colors.white54, fontSize: 14.sp, fontWeight: FontWeight.bold),
                        ),
                        style: TextStyle(color: Colors.white, fontSize: 14.sp, fontWeight: FontWeight.bold),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            28.hGap,
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 32.w),
              child: Text(
                'Password'.tr,
                style: const TextStyle(
                  color: AppColors.secondaryText,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            16.hGap,
            InnerContainerWidget(
              child: Padding(
                padding: EdgeInsets.only(left: 16.w),
                child: TextField(
                  controller: controller.passwordController,
                  decoration: InputDecoration(
                    border: InputBorder.none,
                    hintText: '6+ characters'.tr,
                    hintStyle: TextStyle(color: Colors.white54, fontSize: 14.sp, fontWeight: FontWeight.bold),
                  ),
                  style: TextStyle(color: Colors.white, fontSize: 14.sp, fontWeight: FontWeight.bold),
                ),
              ),
            ),
            28.hGap,
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 32.w),
              child: Text(
                'Verification Code'.tr,
                style: const TextStyle(
                  color: AppColors.secondaryText,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            16.hGap,
            Row(
              children: [
                Expanded(
                  child: InnerContainerWidget(
                    margin: EdgeInsets.only(left: 32.w, right: 12.w),
                    child: Padding(
                      padding: EdgeInsets.only(left: 16.w),
                      child: TextField(
                        controller: controller.verificationCodeController,
                        decoration: const InputDecoration(border: InputBorder.none),
                        style: TextStyle(color: Colors.white, fontSize: 14.sp, fontWeight: FontWeight.bold),
                      ),
                    ),
                  ),
                ),
                GestureDetector(
                  onTap: () => controller.sendVerificationCode(),
                  child: Container(
                    width: 88.w,
                    height: 52.h,
                    margin: EdgeInsets.only(right: 32.w),
                    decoration: BoxDecoration(
                      gradient: const LinearGradient(colors: [Color(0xff6EDEF7), Color(0xff3351EF)]),
                      borderRadius: 12.radius,
                    ),
                    child: Center(
                      child: Obx(
                        () => Text(
                          controller.secondsRemaining == 0 ? 'Send'.tr : '${controller.secondsRemaining}s',
                          style: const TextStyle(fontFamily: 'Montserrat', fontWeight: FontWeight.bold),
                        ),
                      ),
                    ),
                  ),
                )
              ],
            ),
            28.hGap,
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 32.w),
              child: Text(
                'Invitation code, Earn extra \$xxx (optional)'.tr,
                style: const TextStyle(
                  color: AppColors.secondaryText,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            16.hGap,
            InnerContainerWidget(
              child: Padding(
                padding: EdgeInsets.only(left: 16.w),
                child: TextField(
                  controller: controller.invitationCodeController,
                  decoration: const InputDecoration(border: InputBorder.none),
                  style: TextStyle(color: Colors.white, fontSize: 14.sp, fontWeight: FontWeight.bold),
                ),
              ),
            ),
            28.hGap,
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Obx(
                  () => InkWell(
                    onTap: () => controller.isChecked = !controller.isChecked,
                    child: Padding(
                      padding: EdgeInsets.all(8.w),
                      child: Image.asset(
                        'assets/images/${controller.isChecked ? 'ic_sel_box_pre' : 'ic_sel_box_nor'}.webp',
                        width: 16.w,
                        height: 16.w,
                      ),
                    ),
                  ),
                ),
                InkWell(
                  onTap: () => controller.isChecked = !controller.isChecked,
                  child: Text('I agree with XE’s'.tr, style: TextStyle(fontSize: 12.sp)),
                ),
                4.vGap,
                GestureDetector(
                  onTap: () => Get.toNamed(
                    Routes.WEB_VIEW,
                    arguments: {'url': ConfigStore.to.webUrls['Terms of service']},
                  ),
                  child: Text(
                    'Terms of service'.tr,
                    style: TextStyle(
                      fontSize: 12.sp,
                      // 下划线
                      decoration: TextDecoration.underline,
                      // 下划线厚度
                      decorationThickness: 2.0,
                      // 下划线颜色
                      decorationColor: AppColors.primaryText,
                      // 下划线样式
                      decorationStyle: TextDecorationStyle.solid,
                    ),
                  ),
                ),
                Text(',', style: TextStyle(fontSize: 12.sp)),
                4.vGap,
                GestureDetector(
                  onTap: () => Get.toNamed(
                    Routes.WEB_VIEW,
                    arguments: {'url': ConfigStore.to.webUrls['Privacy policy']},
                  ),
                  child: Text(
                    'Privacy policy'.tr,
                    style: TextStyle(
                      fontSize: 12.sp,
                      // 下划线
                      decoration: TextDecoration.underline,
                      // 下划线厚度
                      decorationThickness: 2.0,
                      // 下划线颜色
                      decorationColor: AppColors.primaryText,
                      // 下划线样式
                      decorationStyle: TextDecorationStyle.solid,
                    ),
                  ),
                ),
                Text('.', style: TextStyle(fontSize: 12.sp)),
              ],
            ),
            36.hGap,
            GestureDetector(
              onTap: () => controller.register(),
              child: Container(
                height: 52.h,
                margin: EdgeInsets.symmetric(horizontal: 32.w),
                decoration: BoxDecoration(
                  gradient: const LinearGradient(colors: [Color(0xff6EDEF7), Color(0xff3351EF)]),
                  borderRadius: 100.radius,
                ),
                child: Center(
                  child: Text(
                    'Create Account'.tr,
                    style: const TextStyle(fontFamily: 'Montserrat', fontWeight: FontWeight.bold),
                  ),
                ),
              ),
            ),
            20.hGap,
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('Already have an account?'.tr, style: TextStyle(fontSize: 12.sp)),
                4.vGap,
                GestureDetector(
                  onTap: () => Get.offAllNamed(Routes.SIGN_IN),
                  child: Text(
                    'Sign in'.tr,
                    style: TextStyle(
                      fontSize: 12.sp,
                      // 下划线
                      decoration: TextDecoration.underline,
                      // 下划线厚度
                      decorationThickness: 2.0,
                      // 下划线颜色
                      decorationColor: AppColors.primaryText,
                      // 下划线样式
                      decorationStyle: TextDecorationStyle.solid,
                    ),
                  ),
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}
